<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Insert title here</title>
</head>
<style>
		table{
			width: 400px;
			border: 1px dashed deepskyblue;
			box-shadow: 5px 5px bisque;
			text-align: center;
			
		}
	
		#userDiv{
			width: 400px;
			margin: 0px auto;
		}
		
		input[type=text]{
			width: 70px;
			height: 18px;
		}
		
		#addRoleBtn{
			
			width: 50px;
			height: 30px;
		}
		
		#addTable{
			margin: 0px auto;
			display: none;
			width: 400px;
			border: 1px dashed deepskyblue;
			box-shadow: 5px 5px bisque;
			text-align: center;
		}
		#updataTable{
			margin: 0px auto;
			display: none;
			width: 400px;
			border: 1px dashed deepskyblue;
			box-shadow: 5px 5px bisque;
			text-align: center;
		}
		
		
	</style>
	
	
<body>
	<div id="userDiv">
		<table id="userTable" border="1px"  cellpadding="0" cellspacing="0">
			<tr class="dontRemove">
				<td colspan="4">
					<input type="button" id="myadd" value="添加" />
					<input type="button" id="mydel" value="删除" />
					<input type="button" id="myupdata" value="修改" />
					<input type="button" id="mysava" value="保存" />
				    <input type="text" id="myqueryText"  />
					<input type="button" id="myquery" value="查询" />
				
				</td>
			</tr>
			<tr class="dontRemove">
				<td><input type="checkbox" id="menucheckbox" /></td>
				<td>ID</td>
				<td>角色名字</td>
			</tr>
			
			<!--<tr>
				<td colspan="3">
					<img src="img/shouye.png" id="shouye"/>
					<img src="img/uppage.png" id="uppage"/>
					<img src="img/nextpage.png" id="nextpage"/>
					<img src="img/moye.png" id="moye"/>
				</td>
			</tr>-->
		</table>
		
		
		<br />
		<br />
		<!-- 添加的表格 -->
		<table id="other" >
			
		</table>
		
		<!-- 要添加的时候出现这个 -->
		<table id="addTable"  border="1px" cellspacing="0" cellpadding="0">
			<th colspan="2">添加角色</th>
			<tr>
				<td>角色名称</td>
				<td><input type="text" id="addrole" value="xx" /></td>
			</tr>
			<tr>
				<td colspan="2"><button id="addRoleBtn" value="提交" >提交</button></td>
			</tr>
		</table>
		
		<table id="updataTable"  border="1px" cellspacing="0" cellpadding="0">
		<th colspan="2">修改角色</th>
		<tr>
			<td>角色id</td>
			<td><input type="text" id="updateroleid" disabled="disabled" /></td>
		</tr>
		<tr>
			<td>角色名称</td>
			<td><input type="text" id="updaterolename"  /></td>
		</tr>
		<tr>
			<td colspan="2"><button id="updateRoleBtn" value="提交" >提交</button></td>
		</tr>
	</table>
		
	</div>


</body>

<!-- http://localhost:8090/super-base-ssm/role/rolelist.jsp -->
<script type="text/javascript" src="${pageContext.request.contextPath}/js/jquery-1.4.4.js"></script>
<script>

	var currentPage=1;
	var pageSide=4;
	var acount=0;
	
	//1.进入页面加载第一页
	$(function(){
		pageWith(currentPage);
	});
	
	/**
	 * 分页函数  
	 * @param  currentP  当前的页数  
	 */
	function pageWith(currentP){
		var url='${pageContext.request.contextPath}/role/findPage';
		$.ajax({
			'type':'post',
			'url':url,
			'data':{
				'pageIndex':currentP,
				'pageSize':pageSide,
			},
			'success':function(jsonData){
				//fingWithPage":[{"id":1001,"name":"吴荣来","password":"15213486dwdw32165165"}
				console.log(jsonData);
				acount=jsonData.yeshu;
				
				
				$(jsonData.list).each(function(i,data){
					
					console.log(data);
					
					
					var id=data.id;
					var name=data.roleName;
					
					//1逻辑思路 在table插入1个tr
					var td01= $("<td>"+id+"</td>");
					var td02= $("<td>"+name+"</td>");
					
					//2添加一个复选框
					var td04= $('<td><input type="checkbox"/></td>');
					
					//3生成一个tr,把td插到tr中
					var tr01= $("<tr></tr>");
					//4先添加的在前面
					tr01.append(td04);
					
					tr01.append(td01);
					tr01.append(td02);
					
					//5把tr插到table中
					$('#userTable').append(tr01);
					//分页
			});
			
			//添加分页行   在返调函数里面
			var $tdpage=$('<td colspan="3"><img src="${pageContext.request.contextPath}/img/shouye.png" id="shouye"/><img src="${pageContext.request.contextPath}/img/uppage.png" id="uppage"/><img src="${pageContext.request.contextPath}/img/nextpage.png" id="nextpage"/><img src="${pageContext.request.contextPath}/img/moye.png" id="moye"/></td>');
			
			var $trpage=$('<tr class=".dontRemove"></tr>');
			//分页行添加到到table上
			$trpage.append($tdpage);
			$('#userTable').append($trpage);
			
		},
		'dataType':'json'
		});
	}
	
	/* 总菜单添加按钮 */
	$('#myadd').click(function(){
		$('#addTable').css("display","block");
	});
	
	/* 总菜单修改按钮 */
	$('#myupdata').click(function(){
		
		var len = $('input:checked').length;
		if(len==1){
			$('#updataTable').css("display","block");
			var oldid=$('input:checked').parents('td').next().text();		
			var oldname=$('input:checked').parents('td').next().next().text();
			$('#updateroleid').val(oldid);
			$('#updaterolename').val(oldname);
		}
	});
	
	/* 总菜单查询按钮 */
	$('#myquery').click(function(){
		
		var querttext=$('#myqueryText').val();
		$.ajax({
			'type':'post',
			'dateType':'json',
			'url':'${pageContext.request.contextPath}/role/myquery',
			'data':{
				'roleName':querttext,
			},
			'success':function(msg){
				if(msg.code==200){
					
					var td01= $("<td>角色id</td>");
					var td02= $("<td>角色名称</td>");
					var $tr01=$('<tr></tr>')
					
					$tr01.append(td01);
					$tr01.append(td02);
					
					//5把tr插到table中
					$('#other').append($tr01);
					
					$(msg.jg).each(function(i,data){
						
						var td01= $("<td>"+data.id+"</td>");
						var td02= $("<td>"+data.roleName+"</td>");
						
						
						var $tr01=$('<tr></tr>')
						
						$tr01.append(td01);
						$tr01.append(td02);
						
						//5把tr插到table中
						$('#other').append($tr01);
						
						//分页
					});
					var tr02=$('<tr><td colspan="2"> <input type="button" id="qx" value="确定" /></td></tr>');
					$('#other').append(tr02);
				}
				
			},
		});
		
	});
	/* 查询生成的确定按钮*/
	
	$('#qx').live('click',function(){
		window.location.reload();
	});
	
	/* 生成的菜单的提交按钮 */
	$('#addRoleBtn').live('click',function(){
		var newrole = $('#addrole').val();
		$.ajax({
			'type':'post',
			'dataType':'json',
			'url':"${pageContext.request.contextPath}/role/myinsert",
			'data':{
				'roleName':newrole,
			},
			'success':function(msg){
				console.log(msg.count);
				if(msg.count==1 && msg.code==200){
					alert("添加成功");
					
					/* 重新加载数据 */
					window.location.reload();
				}else{
					alert("添加失败");
				}
				
			},
		});
	});
	
	
	/* 生成的修改的的提交按钮  */
	$('#updateRoleBtn').live('click',function(){
		var newid= $('#updateroleid').val();
		var newname= $('#updaterolename').val();
		$.ajax({
			'type':'post',
			'dataType':'json',
			'url':"${pageContext.request.contextPath}/role/myupdate",
			'data':{
				'id':newid,
				'roleName':newname,
			},
			'success':function(msg){
				console.log(msg.count);
				if(msg.count==1 && msg.code==200){
					alert("修改成功");
					
					/* 重新加载数据 */
					window.location.reload();
				}else{
					alert("修改失败");
				}
				
			},
		});
	});
	
	/* 总的菜单复选框 */
	$('#menucheckbox').click(function(){
		
		/* 循环 去搞 */
		/* $('input[type=checkbox]').each(function(i,data){
			console.log("zz");
			var flag=$(data).attr("checked");
			if(flag){
				$(data).attr("checked",false);
			}else{
				$(data).attr("checked",true);
			}
		}); */
		
		var flag=$('#menucheckbox').attr("checked");
		if(flag){
			$('input[type="checkbox"]').attr("checked",true);
		}else{
			$('input[type="checkbox"]').attr("checked",false);
		}
	});
	
	$('#mydel').click(function(){
		var did='';
		var len = $('input:checked').length;
		$('input:checked').each(function(i,data){
			var $td=$(data).parent().next();
			var delid= $td.html();
			if(len-1==i){
				did=did+delid;
			}else{
				did=delid+",";
			}
		});
		$.ajax({
			'type':'post',
			'dataType':'json',
			'data':{
				'did':did,
			},
			'url':"${pageContext.request.contextPath}/role/mydelete",
			'success':function(msg){
				console.log(msg.counter);
				if(msg.counter>0){
					alert("共删除"+msg.counter+"数据");
					
					/* 重新加载数据 */
					window.location.reload();
				}else{
					alert("删除失败");
				}
			},
		});
		
	});
	
	//2.点击分页按钮
	//2.1下一页
	$('#nextpage').live('click',function(){
		
		//如果当前页面小于总页数，可以按下一页
		if(currentPage<acount){
			//先清空之前的数据
	//		$('tr:not(.dontRemove)').remove();
			RemoveTr();
			
			//获得当前的'currentPage':,'pageSide':, 向数据库查询
			currentPage=currentPage+1;
			pageWith(currentPage);
		}else{
			alert("已经是末页");
		}
		
	});
	
	//2.2上一页
	$('#uppage').live('click',function(){
		
		//如果当前页面小于总页数，可以按下一页
		if(currentPage>1){
			//先清空之前的数据
	//		$('tr:not(.dontRemove)').remove();
			RemoveTr();
			
			//获得当前的'currentPage':,'pageSide':, 向数据库查询
			currentPage=currentPage-1;
			pageWith(currentPage);
		}else{
			alert("已经是首页");
		}
		
	});
	//2.3首页
	$('#shouye').live('click',function(){
		
		//如果当前页面小于总页数，可以按下一页
		
			//先清空之前的数据
	//		$('tr:not(.dontRemove)').remove();
			RemoveTr();
			
			//获得当前的'currentPage':,'pageSide':, 向数据库查询
			currentPage=1;
			pageWith(currentPage);
		
		
	});
	
	//2.4末页
	/**
	 * 末页按钮
	 */
	$('#moye').live('click',function(){
		
		//如果当前页面小于总页数，可以按下一页
		
			//先清空之前的数据
	//		$('tr:not(.dontRemove)').remove();
			RemoveTr();
			
			//获得当前的'currentPage':,'pageSide':, 向数据库查询
			currentPage=acount;
			pageWith(currentPage);
		
	});
	
	/**
	 * 插入下一页的之前清空之前的数据
	 */
	function RemoveTr(){
		//先清空之前的数据
		$('tr:not(.dontRemove)').remove();
	}
	
	

</script>
</html>